<template>
  <el-dialog
    v-bind="$attrs"
    append-to-body
    :close-on-click-modal="false"
    :align-center="true"
    destroy-on-close
    :close-icon="CloseBold"
  >
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
</script>

<style lang="scss">
.el-dialog {
  border-radius: 10px;
  background: #f8f8f8;
}
.el-dialog__close {
  font-size: 20px !important;
}
.el-dialog__footer {
  text-align: center;
}

.el-dialog__title {
  height: 19px;
  font-size: 18px;
  font-weight: 500;
  color: #0a1629;
  margin-left: 8px !important;
  position: relative;
}
</style>
